<template>
  <div class="home">
    <!-- 主体地图显示 -->
    <el-container style="height: 30%">
      <el-main>
        <!-- 顶部工具栏 -->
        <!-- <top-tool-bar @alarmchind="alarmchind" /> -->
        <!-- 地图显示 -->
        <div id="map" style="height: 100% !important; width: 100%"></div>
        <!-- 线段、标段 的 开启按钮 -->
      </el-main>
    </el-container>
    <!-- 底部信息列表 -->
    <el-footer :class="hideFooter ? 'height0' : ''">
      <vdr class="vdr" @resizing="resize" :draggable="false">
        <div ref="footerTitle" class="footer_title">
          路线列表 - {{ select.lotInfo.LNAME + ' - ' + select.workType }}
          <i class="iconfont icon-shanchu" @click="toHideFooter()"></i>
        </div>
        <GD-view></GD-view>
      </vdr>
    </el-footer>
    <!-- <div class="cover" v-if="coverIsShow" @click="closeCover"></div> -->
    <!-- 左下角 列表展开按钮-->
    <div class="mini_legend" v-if="hideFooter" @click="showFooter()">
      路线列表
    </div>

    <!-- 右上 标段选择 作业类型选择 -->
    <div class="work-type-wrap">
      <div class="map-infos">
        <el-dropdown @command="handleClientCommand">
          <span
            class="el-dropdown-link"
            style="font-size: 38px; padding-left: 10px"
          >
            {{ select.lotInfo.LNAME
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu>
            <!-- 选择'请选择‘这个选项，他没有command这个属性，所以选择他相当于，清空已经选择的选项 -->
            <!-- <el-dropdown-item>全部</el-dropdown-item> -->
            <!-- 选项的数据列表循环，这里的属性，只有commang必须要使用':'绑定才能使用，这个坑了我好久，所以，为了不忘记这个事情，他所有的属性，不管是否需要绑定，我们都使用':'绑定，这个总没有错 -->
            <el-dropdown-item
              v-for="(item, index) in select.lotList"
              :command="item.LNAME"
            >
              {{ item.LNAME }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="handleCommand">
          <span
            class="el-dropdown-link"
            style="
              font-size: 23px;
              text-align: right;
              width: 135px;
              display: inline-block;
            "
          >
            {{ select.workType
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu>
            <!-- 选择'请选择‘这个选项，他没有command这个属性，所以选择他相当于，清空已经选择的选项 -->
            <!-- 选项的数据列表循环，这里的属性，只有commang必须要使用':'绑定才能使用，这个坑了我好久，所以，为了不忘记这个事情，他所有的属性，不管是否需要绑定，我们都使用':'绑定，这个总没有错 -->
            <el-dropdown-item
              v-for="(item, index) in select.workTypeList"
              :command="item.WORKTYPE"
            >
              {{ item.WORKTYPE }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="map-btn">
        <!-- <el-button-group> -->
        <el-button type="primary" plain @click="newRoadLine"
          >新建路线</el-button
        >
        <!-- <el-button type="primary" plain>导入路线</el-button> -->
        <el-button type="primary" plain @click="setDistance"> 测 距 </el-button>
        <el-checkbox
          @change="changeRoadName"
          v-model="checkedRoadName"
          label="显示路名"
          border
          style="
            display: inline-block;
            margin-left: 10px;
            height: 42px;
            padding: 11px 20px 10px 10px;
          "
        ></el-checkbox>
        <!-- </el-button-group> -->
      </div>
    </div>

    <!-- 左上 新建 路线详情 -->
    <div class="edit-poly-list-wrap" v-if="formGrid.show">
      <div class="edit-poly-list">
        <div>
          <el-form ref="formGrid" :model="formGrid">
            <el-form-item label="路线名称：">
              <el-input
                style="width: 207px"
                v-model="formGrid.LINENAME"
              ></el-input>
            </el-form-item>
            <el-form-item label="班次：">
              <el-select v-model="formGrid.SID" @change="getRoadUnSetting">
                <el-option
                  v-for="item in arraySchedule"
                  :key="item.SID"
                  :value="item.SID"
                  :label="item.SNAME"
                ></el-option>
              </el-select>
            </el-form-item>
            <div>
              <span style="padding-left: 5px; font-size: 14px; color: #333"
                >道路类型：
              </span>
              <el-checkbox-group
                v-model="roadLevel"
                @change="getRoadWorkInfoTemp"
                style="margin-bottom: 22px; display: inline-block"
                size="small"
              >
                <el-checkbox-button label="全部">全部</el-checkbox-button>
                <el-checkbox-button label="一级">一级</el-checkbox-button>
                <el-checkbox-button label="二级">二级</el-checkbox-button>
                <el-checkbox-button label="三级">三级</el-checkbox-button>
                <el-checkbox-button label="四级">四级</el-checkbox-button>
              </el-checkbox-group>
            </div>
            <el-form-item label="可选道路：">
              <el-select
                v-model="formGrid.newRID"
                filterable
                clearable
                placeholder="选择道路加入下方列表"
              >
                <el-option
                  v-for="(item, index) in arrayRoadUnSettingSelect"
                  :key="item.RNAME"
                  :label="item.RNAME"
                  :value="item.RNAME"
                  @click.native="changeRoadUnSetting(index, item)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table :data="formGrid.data" max-height="250">
            <el-table-column
              prop="RNAME"
              label="道路名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="RGrade"
              label="道路类型"
              align="center"
            ></el-table-column>
            <!-- <el-table-column width="100" label="作业次数" align="center">
              <template slot-scope="scope">
                <el-input
                  type="number"
                  min="1"
                  v-model="scope.row.WORKNUM"
                ></el-input>
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="removePolyline(scope.$index, scope.row.RNAME)"
                  style="color: red"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          style="
            position: absolute,
            text-align: center;
            margin-top: 15px;
          "
        >
          <el-button
            style="width: 100%; margin-bottom: 10px"
            size="small"
            :type="(formGrid.data.length === 0) ? 'info' : 'primary'"
            @click="saveGird()"
            >保 存</el-button
          >
          <el-button
            style="width: 100%; margin-left: 0px; margin-bottom: 10px"
            size="small"
            type="danger"
            @click="deleteGridWindow()"
            >删 除</el-button
          >
          <el-button
            style="width: 100%; margin-left: 0px"
            size="small"
            @click="tableForPolyCancle"
            >取 消</el-button
          >
        </div>
      </div>

      <!-- 面板切换选项卡 -->
      <!-- <div class="info-tabs">
        <a
          v-for="(item, index) in mapInfoTabs"
          :class="{ active: mapInfoTabValue === index }"
          :key="index"
          @click="changeMapInfoTabValue(index)"
        >
          <i :class="item.icon"></i>
        </a>
      </div> -->
    </div>

    <!-- 查遗漏 窗口展示 -->
    <el-dialog
      title="验证路线是否覆盖所有道路"
      :visible.sync="formNoFill.show"
      width="50%"
    >
      <!-- <div>
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form ref="form" :model="form">
              <el-form-item label="开始日期：">
                <el-date-picker
                  v-model="form.StartDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-form ref="form" :model="form">
              <el-col :span="6">
                <el-form ref="form" :model="form">
                  <el-form-item label="点位名称：">
                    <el-input
                      v-model="form.Name"
                      style="width: 200px"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-form>
          </el-col>
          <el-col :span="4">
            <el-form ref="form" :model="form" style="float: right">
              <el-button
                size="mini"
                type="primary"
                @click="getWarningDetailList"
                >查 询</el-button
              >
              <el-button size="mini" type="success" @click="exportExcel"
                >导 出</el-button
              >
            </el-form>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form ref="form" :model="form">
              <el-form-item label="结束日期：">
                <el-date-picker
                  v-model="form.EndDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6">
            <el-form ref="form" :model="form">
              <el-form-item label="报警类型：">
                <el-select v-model="form.alermTypeValue" placeholder="请选择">
                  <el-option
                    v-for="item in form.alermTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div> -->
      <el-table max-height="500" :data="formNoFill.data">
        <el-table-column
          prop="Rname"
          label="道路名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="RGrade"
          label="道路等级"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="WorkDifference"
          label="作业次数差额"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// 引入垃圾点组件
import GDView from '@/views/Vehicle/Setting/SettingRoadLineTable.vue'
import { newMap } from '@/common/js/map.js'
import eventBus from '@/eventBus.js'


export default {
  components: {
    // 'map-view': mapView,
    'GD-view': GDView,
  },
  data () {
    return {
      map: null,
      mapZoom: 15,
      mapCursor: null,
      arrayRoadName: [],
      mapVtext: null,

      // lotInfo: '',
      arrayWorkTyp: [],
      arraySchedule: [],
      arrayRoadUnSettingSelect: [],
      arrayRoadUnSetting: [],
      arrayRoadNameLabel: [],

      containerHeight: 0,
      footerHeight: 0,
      mainWidth: 0,
      asideWidth: 0,
      hideFooter: false,
      checkedRoadName: false,

      select: {
        workType: '',
        workTypeList: [],
        lotInfo: { LNAME: '' },
        lotList: [{ "LID": "1", "LNAME": "东丽西片", "CLIENT_NO": "0000009", "PARENT_NO": "00000", "PARENT_NAME": "东丽城管委", "COMPANY": "博德尔", "STARTDATE": "2022-06-01", "ENDDATE": "2025-06-01", "WorkerNum": null, "RoadNum": "253", "DriverNum": "16", "CarNum": "372" }, { "LID": "2", "LNAME": "东丽东片", "CLIENT_NO": "0000001", "PARENT_NO": "00000", "PARENT_NAME": "东丽城管委", "COMPANY": "城管委", "STARTDATE": "2022-06-01", "ENDDATE": "2025-06-01", "WorkerNum": null, "RoadNum": "204", "DriverNum": "16", "CarNum": "173" }, { "LID": "12", "LNAME": "东丽南片", "CLIENT_NO": "0000010", "PARENT_NO": "00000", "PARENT_NAME": "东丽城管委", "COMPANY": "测试1", "STARTDATE": "2024-04-01", "ENDDATE": "2025-03-31", "WorkerNum": null, "RoadNum": "0", "DriverNum": "16", "CarNum": "0" }, { "LID": "14", "LNAME": "东丽北片", "CLIENT_NO": "0000011", "PARENT_NO": "00000", "PARENT_NAME": "东丽城管委", "COMPANY": "北段公司", "STARTDATE": "2024-05-01", "ENDDATE": "2025-04-30", "WorkerNum": null, "RoadNum": "2", "DriverNum": "16", "CarNum": "0" }]

      },

      roadLevel: ["全部"],
      roadLevelValue: '',

      formNoFill: {
        show: false,
        data: [],
      },
      formGrid: {
        dataRoadName: [],
        WORKTYPE: '',
        show: false,
        data: [],
        GID: ''
      },

    }
  },
  mounted () {
    eventBus.$emit('mapSize', document.querySelector('.el-main').clientHeight - 32)
    this.containerHeight = document.querySelector('.el-container').clientHeight
    this.footerHeight = document.querySelector('.el-footer').clientHeight
    this.mainWidth = document.querySelector('.el-main').clientWidth
    // this.asideWidth = document.querySelector('.el-aside').clientWidth

    // 显示地图
    this.mapShow()
    // this.getRoadInfoPB()
    this.getWorkTypeInfo()


  },
  created () {
    // 显示底部列表
    eventBus.$on('toShowFooter', () => {
      this.hideFooter = false;
    })
    // 隐藏底部列表
    eventBus.$on('toHideFooter', () => {
      this.hideFooter = true;
    })
    eventBus.$on('roadLine_showNoFill', (val) => {
      this.formNoFill.data = val
      this.formNoFill.show = true
      // this.formGrid = val
      // this.formGrid.data = []
      // this.formGrid.dataRoadName = []
      // var arrRoad = val.WORKROAD.split(',')
      // var arrRoadNum = val.WORKNUM.split(',')
      // for (let index = 0; index < arrRoad.length; index++) {
      //   this.addRoudInfo(arrRoad[index], arrRoadNum[index])
      // }
      // this.formGrid.show = true;
      // this.toHideFooter();
    })
    eventBus.$on('roadLine_handleEdit', (val) => {
      this.formGrid = val
      this.formGrid.data = []
      this.formGrid.dataRoadName = []
      var arrRoad = val.WORKROAD.split(',')
      var arrRoadNum = val.WORKNUM.split(',')
      for (let index = 0; index < arrRoad.length; index++) {
        this.addRoudInfo(arrRoad[index], arrRoadNum[index])
      }
      this.formGrid.show = true;
      this.toHideFooter();
    })
    eventBus.$on('roadLine_reRoadState', () => {

      this.getRoadUnSettingInitial()
    })
    // eventBus.$on("roadLine_hadRoad", (val) => {
    //   // 获取组织机构树的数据
    //   this.arrayWorkTyp = val;
    //   console.log(val)
    // });
  },
  methods: {
    async getRoadWorkInfoTemp () {
      // console.log(this.roadLevel)
      var lengthRL = this.roadLevel.length
      if (this.roadLevel[lengthRL - 1] === '全部' || lengthRL === 0) {
        this.roadLevel = ["全部"]

      } else if (this.roadLevel[0] === '全部') {
        this.roadLevel.splice(0, 1);
        // console.log(this.roadLevel)
      } else if (lengthRL == 4) {
        this.roadLevel = ["全部"]
      }
      this.changeWorkType()
      this.getRoadUnSetting()
    },
    handleCommand (command) {
      // console.log(command)
      this.select.workType = command
      eventBus.$emit('roadLine_reTableData', this.select.lotInfo.CLIENT_NO, this.select.workType)
      this.getScheduleInfoPB()
    },
    handleClientCommand (command) {
      // console.log(command)
      this.select.lotInfo = this.select.lotList.filter(item => item.LNAME === command)[0]
      eventBus.$emit('roadLine_reTableData', this.select.lotInfo.CLIENT_NO, this.select.workType)
      this.getScheduleInfoPB()
      this.getRoudAllGPS()
    },
    async getScheduleInfoPB () {
      this.loading = true
      var url = "Vehicle/GetScheduleInfoPB?SNAME=&ClientNO=" + this.select.lotInfo.CLIENT_NO
      const { data } = await this.$Http.get(url)
      this.arraySchedule = []
      data.forEach(element => {
        if (element.WORKTYPE === this.select.workType) {
          this.arraySchedule.push(element)
        }
      });
      // console.log(this.arraySchedule)
      if (this.arraySchedule.length > 0) {
        this.formGrid.SID = this.arraySchedule[0].SID
      }
    },
    async getRoadUnSettingInitial () {
      this.loading = true
      var url = "Vehicle/GetLineRoadSettingInfoPB?RGrade=&SID=&RoadName=&LOTID=" + this.select.lotInfo.LID + '&WORKTYPE=' + this.select.workType
      const { data } = await this.$Http.get(url)
      this.arrayRoadUnSetting = data
      setTimeout(() => {
        this.changeWorkType()
      }, 1000);
    },
    async getRoadUnSettingData (RGrade) {
      this.loading = true
      var url = "Vehicle/GetLineRoadSettingInfoPB?RoadName=&LOTID=" + this.select.lotInfo.LID + '&WORKTYPE=' + this.select.workType + '&SID=' + this.formGrid.SID + '&RGrade=' + RGrade
      const { data } = await this.$Http.get(url)
      this.arrayRoadUnSettingSelect = this.arrayRoadUnSettingSelect.concat(data)
      // console.log(this.arrayRoadUnSettingSelect)
    },
    getRoadUnSetting () {
      this.arrayRoadUnSettingSelect = []
      if (this.roadLevel[0] === '全部') {
        this.getRoadUnSettingData('')
      } else {
        this.roadLevel.forEach(element => {
          this.getRoadUnSettingData(element)
        });
      }
    },
    // 编辑经纬度信息
    async getRoudAllGPS () {
      this.formGrid.data = []
      this.arrayRoadName = []
      this.map.clearOverlays()
      var url = "Vehicle/GetClientRoadGPSInfoPB?ClientNO=" + this.select.lotInfo.CLIENT_NO
      const { data } = await this.$Http.get(url)
      var rid = data[0].ROUDID
      var rname = data[0].NAME
      var rGrade = data[0].RGrade
      var points = []
      var pointAll = []

      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        if (element.ROUDID === rid && element.NAME === rname) {
          points.push(new BMap.Point(element.LNG, element.LAT))
          pointAll.push(new BMap.Point(element.LNG, element.LAT))
        } else {
          this.drawRoad(rid, rname, rGrade, points)

          rid = element.ROUDID
          rname = element.NAME
          rGrade = element.RGrade
          points = []
          points.push(new BMap.Point(element.LNG, element.LAT))
          // districtName = element.行政区划
        }
        element.numS = points.length
      }
      this.drawRoad(rid, rname, rGrade, points)
      this.map.setViewport(pointAll);

      this.getRoadUnSettingInitial()
    },
    drawRoad (rid, rname, rGrade, points) {
      // 道路画线
      var polyline = new BMap.Polyline(points, { strokeColor: "#32CD32", strokeWeight: 4, strokeOpacity: 0.5 });   //创建折线
      this.map.addOverlay(polyline);

      polyline.rid = rid
      polyline.rname = rname
      polyline.rGrade = rGrade

      var lineCenter = polyline.getBounds().getCenter()

      this.arrayRoadName.push({
        geometry: {
          type: 'Point',
          coordinates: [lineCenter.lng, lineCenter.lat]
        },
        text: rname,
        roadID: rid
      })

      var label = new BMap.Label(rname, { position: lineCenter, offset: new BMap.Size(-20, -10) })
      polyline.LabelP = label
      label.rGrade = rGrade

      label.setStyle({
        borderColor: '#fff',
        padding: '2px',
        borderRadius: '5px', // 可能内存成本很高
      })
      this.map.addOverlay(label);
      this.arrayRoadNameLabel.push(label)
      if (!this.checkedRoadName) {
        label.hide()
      }

      const _this = this
      polyline.addEventListener('click', function (e) {
        _this.addRoudInfo(this.rname, 1)
      })
    },
    changeRoadName () {
      this.arrayRoadNameLabel.forEach(element => {
        if (this.checkedRoadName) {
          if (this.roadLevel[0] === '全部') {
            element.show()
          } else {
            if (this.roadLevel.includes(element.rGrade)) {
              console.log(element.rGrade)
              element.show()
            }
          }
        } else {
          element.hide()
        }
      });
    },
    changeRoadUnSetting (index, roadInfo) {
      var polyline = this.addRoudInfo(roadInfo.RNAME, 1)
      this.map.setViewport(polyline.getPath());

      this.arrayRoadUnSettingSelect.splice(index, 1);
      this.formGrid.newRID = ''
      // console.log(this.arrayRoadUnSettingSelect)
    },
    addRoudInfo (rname, workNum) {
      var polylineRe = null;
      var indexR = this.formGrid.dataRoadName.indexOf(rname)
      if (indexR < 0) {
        if (this.formGrid.LINEID === undefined) {
          this.formGrid.LINEID = '-1'
        }
        this.formGrid.show = true
        this.toHideFooter()

        var roadInfo = this.arrayRoadUnSetting.filter(item => item.RNAME === rname)[0]
        // roadInfo.WORKNUM = workNum
        this.formGrid.data.push(roadInfo)
        this.formGrid.dataRoadName.push(roadInfo.RNAME)

        this.map.getOverlays().forEach(element => {
          if (element.rname === rname) {
            roadInfo.RGrade = element.rGrade
            element.setStrokeColor("#FF0000");//red
            polylineRe = element;
          }
        });
      } else {
        this.removePolyline(indexR, rname)
      }
      return polylineRe;
    },
    removePolyline (index, rname) {
      this.formGrid.data.splice(index, 1);
      this.formGrid.dataRoadName.splice(index, 1);

      this.arrayRoadUnSetting.forEach(element => {
        if (element.RNAME === rname) {
          this.arrayRoadUnSettingSelect.push(element)
        }
      });

      this.map.getOverlays().forEach(element => {
        if (element.rname === rname) {
          element.setStrokeColor("#32CD32");
        }
      });
    },
    changeWorkType () {
      this.map.getOverlays().forEach(element => {
        // {"ID":"1","RNAME":"津塘公路1","ArcGisLength":"2332.93","LOTID":"1","LNAME":"东丽西片","WORKNUM":"0"}
        if (element.rname != undefined) {
          // arr.indexOf("orange") != -1
          if (this.roadLevel[0] != '全部' && this.roadLevel.indexOf(element.rGrade) < 0) {
            // console.log(this.roadLevel.indexOf(element.rGrade))
            element.hide()
            if (this.checkedRoadName) {
              element.LabelP.hide()
            }
          } else {
            element.show()
            if (this.checkedRoadName) {
              element.LabelP.show()
            }
            var roadUnSettingArr = this.arrayRoadUnSetting.filter(item => item.RNAME === element.rname)
            if (roadUnSettingArr.length > 0) {
              if (this.formGrid.dataRoadName.indexOf(element.rname) > -1) {
                element.setStrokeColor("#FF0000");
              } else if (roadUnSettingArr[0].WORKNUM === '0') {
                element.setStrokeColor("#32CD32");
              } else {
                var strColor = '#000000'
                switch (roadUnSettingArr[0].WORKNUM) {
                  case '5':
                    strColor = '#000033'
                    break;
                  case '4':
                    strColor = '#000066'
                    break;
                  case '3':
                    strColor = '#000099'
                    break;
                  case '2':
                    strColor = '#0000CC'
                    break;
                  case '1':
                    strColor = '#0000FF'
                    break;
                  default:
                    strColor = '#000000'
                    break;
                }

                // var strTrans = (roadUnSettingArr[0].WORKNUM*5+75).toString(16);
                element.setStrokeColor(strColor);
              }
            }
          }
        }
      });
    },
    newRoadLine () {
      this.toHideFooter()
      this.formGrid = {}
      this.formGrid.LINEID = '-1'
      this.formGrid.data = []
      this.formGrid.dataRoadName = []

      if (this.arraySchedule.length > 0) {
        this.formGrid.SID = this.arraySchedule[0].SID
      }

      this.formGrid.show = true
      this.getRoadUnSetting()
    },
    async saveGird () {
      var strRname = ''
      var strRtimes = ''
      this.formGrid.data.forEach(element => {
        // var arrRoad = this.arrayRoad.filter(item => item.RNAME === element.rname)
        // if (arrRoad.length > 0) {
        strRname += element.ID + ','
        strRtimes += '1,'
        // strRtimes += element.WORKNUM + ','
        // }
      });
      strRname = strRname.slice(0, strRname.length - 1)
      strRtimes = strRtimes.slice(0, strRtimes.length - 1)

      var formPara = {
        LINEID: this.formGrid.LINEID,
        LINENAME: this.formGrid.LINENAME,
        WORKTYPE: this.select.workType,
        SID: this.formGrid.SID,
        PARENT_NO: this.select.lotInfo.CLIENT_NO,
        WORKROAD: strRname,
        WORKNUM: strRtimes,
      }
      // console.log(formPara)
      this.$axios({
        url: 'Vehicle/SaveLineInfoPB',
        method: 'post',
        data: formPara
      }).then(res => {
        if (res.data.IsSucess) {
          this.tableForPolyCancle()
          this.showFooter()
          this.$message.success('编辑成功')
          eventBus.$emit('roadLine_reTableData', this.select.lotInfo.CLIENT_NO, this.select.workType)
        } else {
          if (res.data.Message == '-1') {
            this.$message.error('路线添加失败，路线名称不可重复');
          } else {
            this.$message.error('编辑失败' + '，' + res.data.Message);
          }
        }
      })
    },
    async getWorkTypeInfo () {
      var url = 'Vehicle/GetWorkTypeInfoPB'
      const { data } = await this.$Http.get(url)
      this.select.workTypeList = data
      this.select.workType = data[0].WORKTYPE
      this.getLotInfo()
    },
    // 获取组织机构名
    async getLotInfo () {
      var url = 'Vehicle/GetLotInfoPB?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.select.lotList = data
      this.select.lotInfo = data[0]

      this.getRoudAllGPS()
      this.getScheduleInfoPB()

      eventBus.$emit('roadLine_reTableData', this.select.lotInfo.CLIENT_NO, this.select.workType)
    },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      // this.map = newMap()
      this.map = new BMap.Map('map')// 创建Map实例
      this.map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
      this.map.centerAndZoom(new BMap.Point(117.227853, 39.163488), this.mapZoom)// 初始化地图,设置中心点坐标和地图级别
    },
    tableForPolyCancle () {
      this.formGrid.show = false

      this.formGrid = {}
      this.formGrid.data = []
      this.formGrid.dataRoadName = []

      this.showFooter()
      this.getRoadUnSettingInitial()
    },
    // 测距
    setDistance () {
      if (!this.mapCursor) {
        this.mapCursor = new BMapLib.DistanceTool(this.map)
      }
      if (this.mapCursor.isOpen) {
        // 结束测量
        this.mapCursor.close()
      } else {
        // 开始测量
        this.mapCursor.open()
      }
    },
    // 隐藏底部列表
    toHideFooter () {
      this.hideFooter = true;
    },
    // 显示底部列表
    showFooter () {
      this.hideFooter = false;
    },
    // 信息列表窗口缩放
    resize (x, y) {
      document.querySelector('.el-footer').style.height = this.footerHeight - y + 'px'
      document.querySelector('.el-container').style.height = this.containerHeight + y + 'px'
      eventBus.$emit('mapSize', y)
    },
    // 报警列表信息缩放
    resizeWidth (x) {
      document.querySelector('.el-aside').style.width = this.asideWidth - x + 'px'
      document.querySelector('.el-main').style.width = this.mainWidth + x + 'px !important'
    },
  }
}
</script>

<style scoped lang="less">
.home {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.el-header {
  height: 60px;
  .logo {
    float: left;
    line-height: 60px;
    img {
      height: 50px;
      margin-right: 20px;
      vertical-align: middle;
    }
  }
  .title_name {
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    color: #007acc;
    font-weight: 600;
  }
  .title_company {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #007acc;
    font-weight: 200;
  }
  .avatar {
    height: 60px;
    line-height: 60px;
    float: right;
    position: relative;
    .header_img {
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
      width: 40px;
      height: 40px;
      // background-color: #000;
      cursor: pointer;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .account_name {
      cursor: pointer;
      color: #007acc;
    }
    .account_info {
      width: 100px;
      line-height: 20px;
      border: 1px solid #ccc;
      background-color: #fff;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      span {
        display: block;
        text-align: center;
        line-height: 22px;
        color: #333;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: #007acc;
        }
      }
    }
  }
}
.el-container {
  flex: 1;
}
.el-footer {
  width: 100%;
  min-height: 19.417vw !important;
  max-height: 40.417vw;
  z-index: 3;
  background: #fff;
  &.height0 {
    min-height: 0 !important;
    height: 0 !important;
  }
  // position: relative;
  // margin-bottom: 20px;
  .footer_title {
    line-height: 1.963vw;
    background-color: rgb(32, 105, 179);
    color: #fff;
    // cursor: s-resize;
    padding-left: 1.042vw;
    font-weight: 600;
    i {
      float: right;
      margin-right: 0.521vw;
      cursor: pointer;
    }
  }
}
.el-aside {
  // height: 300px;
  overflow: hidden;
  /deep/.handle-tm {
    display: none !important;
  }
}
.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.vdr {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  // bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
/deep/.handle-tm {
  width: 100% !important;
  height: 5px;
  top: -5px !important;
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #007acc;
  font-size: 14px;
  &.right {
    right: 10px;
    left: auto;
  }
}
.edit-poly-list-wrap {
  position: absolute;
  left: 25px;
  top: 12%;
  .edit-poly-list {
    background: rgba(255, 255, 255, 0.9);
    height: 600px;
    width: 400px;
    border-radius: 5px;
    padding: 25px 10px 10px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.map-operation {
  position: absolute;
  right: 2%;
  top: 180px;
  background: rgba(255, 255, 255, 0.9);
  // border: 1px solid #dcdfe6;
  box-shadow: 1px 1px 5px #666;
  border-radius: 3px;
  ul {
    li {
      list-style: none;
      float: left;
      color: #666;
      font-size: 15px;
      padding: 5px 12px;
      position: relative;
      cursor: pointer;
      i {
        margin-right: 3px;
        // font-size: 14px;
        // &:before {
        //   font-size: inherit;
        //   color: inherit;
        // }
      }
      &::before {
        display: block;
        content: '';
        width: 1px;
        height: 13px;
        background: #dcdfe6;
        position: absolute;
        right: 0;
        top: 8px;
      }
      // &:last-child {
      //   &::before {
      //     display: none;
      //   }
      // }
      // &.active {
      //   color: #007acc;
      // }
    }
  }
}
.work-type-wrap {
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  right: 2%;
  top: 100px;
  height: 150px;
  .map-infos {
    width: 320px;

    padding-top: 20px;
    padding-left: 10px;
    padding-bottom: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
  }
  .map-btn {
    width: 320px;

    padding: 10px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
  }
}
</style>
